<template>
  <div id="app">
    <div class="footer">
      <ul>
        <router-link tag="li" to="/">
          <p class="iconfont icon-SSS sss"></p>
          <span>外卖</span>
        </router-link>
        <router-link tag="li" to="/Dingdan">
          <p class="iconfont icon-faxian1 fx"></p>
          <span>发现</span>
        </router-link>
        <router-link tag="li" to="/Faxian">
          <p class="iconfont icon-icon- ic"></p>
          <span>订单</span>
        </router-link>
        <router-link tag="li" to="/Wode">
          <p class="iconfont icon-profile pr"></p>
          <span>我的</span>
        </router-link>
      </ul>

    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

  .footer{
        height:1.35rem;
        background: #f7f7f7;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        ul{
            display: flex;
            li{
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 0.3rem;
                line-height: 0.5rem;
                span{
                    font-size: 0.2rem;
                    margin-bottom:0.1rem; 
                }
                p{
                    font-size: 0.47rem;
                }
                &.router-link-active{
                p{
                    color: blue;
                }
                span{
                    color: #0eb7ba; 
                }
                
            }

            }
        }
    }

@font-face {
  font-family: "iconfont";
  src: url('./assets/font/iconfont.eot?t=1528767371848');
  /* IE9*/
  src: url('./assets/font/iconfont.eot?t=1528767371848#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('./assets/font/iconfont.ttf?t=1528767371848') format('truetype');
  /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-faxian:before {
  content: "\e605";
}

.icon-profile:before {
  content: "\e600";
}

.icon-icon-:before {
  content: "\e601";
}

.icon-SSS:before {
  content: "\e603";
}

.icon-faxian1:before {
  content: "\e606";
}

.icon-sousuo:before {
  content: "\e612";
}
</style>
